<template>
	<view>
		<view class="uni-padding-wrap topsegment">
			<uni-segmented-control :current="current" :values="items" style-type="text" active-color="#000" @clickItem="onClickItem" />
		</view>
		<scroll-view scroll-y="true" class="scrollY" v-if="current==0">
			<view class="innerContent">
				<uni-swipe-action class="tzlist">
					<uni-swipe-action-item v-for="(item,index) in systemMsg" :options="options" :key="index" class="tzitem" @click="swipeClick($event,index)">
						<view class="avatar">
							<image src="../../static/test/a1.jpg" mode=""></image>
						</view>
						<view class="content" @click="viewContent(item)" :class="{notRead: !item.read }">
							<text class="cont">{{item.content}}</text>
							<text class="date">{{item.date}}</text>
						</view>
					</uni-swipe-action-item>
				</uni-swipe-action>
			</view>
		</scroll-view>
		<scroll-view scroll-y="true" class="scrollY" v-if="current==1">
			<view class="innerContent">
				<uni-swipe-action class="tzlist">
					<uni-swipe-action-item v-for="(item,index) in systemMsg" :options="options" :key="index" class="tzitem" @click="swipeClick($event,index)">
						<view class="content" @click="viewContent(item)" :class="{notRead: !item.read }">
							<text class="cont">{{item.content}}</text>
							<text class="date">{{item.date}}</text>
						</view>
					</uni-swipe-action-item>
				</uni-swipe-action>
			</view>
		</scroll-view>
		<scroll-view scroll-y="true" class="scrollY" v-if="current==2">
			<view>
				<textarea v-model="comment" class="commentArea" placeholder="在这里写下" maxlength="-1"/>
			</view>
			<button type="default" class="submit-btn">提交</button>
		</scroll-view>
	</view>
</template>

<script>
	import uniSwipeAction from '@/components/uni-swipe-action/uni-swipe-action.vue'
	import uniSwipeActionItem from '@/components/uni-swipe-action-item/uni-swipe-action-item.vue'
	var deleteImg = require('../../static/imgs/message/xx_sc@2x.png'); 
	export default {
		components: {
			uniSwipeAction,
			uniSwipeActionItem
		},
		data() {
			return {
				current: 0,
				items: ['商家消息', '系统消息', '平台反馈'],
				sjMsg: [{
						content: '指定光标与键盘的距离，单位 px 。取 textarea 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离',
						date: '2020-4-12 15:14',
						read: true
					}, {
						content: '微信小程序、App、H5、百度小程序、字节跳动小程序、QQ小程序，指定光标与键盘的距离，单位 px 。取 textarea 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离',
						date: '2020-4-12 15:14',
						read: false
					}, {
						content: '微信小程序、App、H5、百度小程序、字节跳动小程序、QQ小程序，指定光标与键盘的距离，单位 px 。取 textarea 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离',
						date: '2020-4-12 15:14',
						read: true
					}, {
						content: '微信小程序、App、H5、百度小程序、字节跳动小程序、QQ小程序，指定光标与键盘的距离，单位 px 。取 textarea 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离',
						date: '2020-4-12 15:14',
						read: false
					}],
				systemMsg: [{
					content: '指定光标与键盘的距离，单位 px 。取 textarea 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离',
					date: '2020-4-12 15:14',
					read: true
				}, {
					content: '微信小程序、App、H5、百度小程序、字节跳动小程序、QQ小程序，指定光标与键盘的距离，单位 px 。取 textarea 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离',
					date: '2020-4-12 15:14',
					read: false
				}, {
					content: '微信小程序、App、H5、百度小程序、字节跳动小程序、QQ小程序，指定光标与键盘的距离，单位 px 。取 textarea 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离',
					date: '2020-4-12 15:14',
					read: true
				}, {
					content: '微信小程序、App、H5、百度小程序、字节跳动小程序、QQ小程序，指定光标与键盘的距离，单位 px 。取 textarea 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离',
					date: '2020-4-12 15:14',
					read: false
				}],
				comment: '',
				options: [{
					text: '<image src="' + deleteImg + '" style="width:20px;height:20px;"></image>',
					style: {
						backgroundColor: '#C53C2C'
					}
				}]
			}
		},
		methods: {
			onClickItem: function(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex;
				}
			},
			viewContent: function (item) {
				if (this.navigateFlag) {
					return;
				}
				this.navigateFlag = true;
				uni.navigateTo({
					url: '/pages/message/contentDetail?content=' + encodeURIComponent(JSON.stringify(item))
				});
				setTimeout(() => {
					this.navigateFlag = false;
				}, 200)
			},
			swipeClick(e, index) {
				uni.showToast({
					title: `点击了${index}按钮`,
					icon: 'none'
				});
			}
		},
		onLoad() {}
	}
</script>

<style lang="scss" scoped>
	.topsegment {
		position: fixed;
		// #ifdef H5
		top: 44px;
		// #endif
		// #ifdef APP-PLUS
		top: 0px;
		// #endif
		/deep/ .active {
			border-bottom-width: 4px;
			.segmented-control__text {
				color: #000 !important;;
			}
		}
		/deep/ .segmented-control__text {
			color: #989898 !important;
		}
	}
	.commentArea {
		width: calc(100% - 30px);
		margin: 15px;
		height: 60vh;
	}
	.scrollY {
		// #ifdef APP-PLUS
		height: calc(100vh - 36px);
		margin-top: 36px;
		// #endif
		// #ifdef H5
    height: calc(100vh - 44px - 36px);
    margin-top: 36px;
		// #endif
		.innerContent {
			padding: 0 10pt;
			width: calc(100% - 20pt);
		}
	}
	.tzlist {
		.tzitem {
			/deep/ .uni-swipe_box{
				// display: block;
				padding: 5px 0px;
				border-bottom: 1px solid #cfcfcf;
			}
		}
		.avatar {
			min-width: 40px;
			height: 40px;
			display: flex;
			align-items: center;
			padding-top: 5px;
			padding-right: 5px;
			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}
		.content {
			&.notRead::after {
				content: '';
				position: absolute;
				width: 10px;
				height: 10px;
				right: 6px;
				background: rgba(197, 60, 44, 0.9);
				top: 38%;
				border-radius: 50%;
			}
			position: relative;
			.cont {
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				line-clamp: 2;
				-webkit-box-orient: vertical;
				width: 95%;
			}
			.date {
				font-size: 12px;
				text-align: right;
				color: #787878;
				display: block;
				margin: 5px;
			}
		}
	}
</style>
